<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>防抖</title>
    </head>
    <body>
        <!-- 通过setTimeout的方式延迟执行 -->
        <input type="button" id="btn" value="按钮" />
        <script>
            var btn = document.getElementById('btn');
            // 点击后触发trigger()函数，第一个参数为真实要执行的函数，第二个参数为定时器延迟时间
            btn.addEventListener('click', trigger(real, 1000));
            function trigger(fn, delay) {
                // 设置time为定时器，初始为 null
                var time = null;
                // 闭包原理，返回一个函数
                return function () {
                    // 如果定时器存在清空定时器
                    if (time) {
                        clearTimeout(time);
                    }
                    // 设置定时器，规定时间后执行真实要执行的函数
                    time = setTimeout(() => {
                        // 将参数传递给真实执行的函数，因为箭头函数继承父级作用域，所以直接...arguments
                        fn(...arguments);
                    }, delay);
                };
            }
            //真实要执行函数
            function real(e) {
                console.log('北极光之夜。');
                console.log(e);
            }
        </script>
    </body>
</html>
